<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>全局查重</title>
    <link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Change to jQuery 3.5.1 instead of 3.6.0 -->
    <script src="/assets/js/jquery-3.5.1.min.js"></script>
    <script src="/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">课程教学总结全局查重</h3>
                    </div>
                    <div class="card-body">
                        <p class="lead">点击"开始查重"按钮，系统将对所有课程教学总结进行两两比较，计算相似度。</p>
                        <p>该过程可能需要几分钟时间，请耐心等待。</p>
                        
                        <div id="statusArea" class="alert alert-info d-none">
                            <div class="d-flex align-items-center">
                                <strong id="statusMessage">查重进行中...</strong>
                                <div class="spinner-border ms-auto" role="status" id="spinner"></div>
                            </div>
                            <div class="mt-3">
                                <!-- 移除进度条相关代码 -->
                                <div class="alert alert-warning mt-2">
                                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                                    系统正在对全部教学总结进行两两比对，该操作可能需要 5-10 分钟，
                                    请保持网络畅通并不要关闭本页面...
                                </div>
                                <!-- 移除原有的progress元素和progressText -->
                            </div>
                        </div>
                        
                        <div id="resultArea" class="d-none">
                            <div class="alert alert-success">
                                <h4 class="alert-heading">查重完成!</h4>
                                <p id="resultSummary">所有课程教学总结的相似度计算已完成。</p>
                                <hr>
                                <div id="resultDetail"></div>
                            </div>
                        </div>
                        
                        <div id="errorArea" class="alert alert-danger d-none">
                            <h4 class="alert-heading">查重失败</h4>
                            <p id="errorMessage"></p>
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button id="startButton" class="btn btn-primary">开始查重</button>
                            <a href="/" class="btn btn-secondary">返回首页</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // Wait for document to be fully loaded before executing jQuery code
        document.addEventListener("DOMContentLoaded", function() {
            // Check if jQuery is loaded
            if (typeof jQuery === 'undefined') {
                console.error("jQuery is not loaded. Please check the path to jQuery library.");
                document.getElementById("errorArea").classList.remove("d-none");
                document.getElementById("errorMessage").textContent = "jQuery library failed to load. Please contact administrator.";
                return;
            }
            
            console.log("jQuery version: " + jQuery.fn.jquery); // Add this line to verify jQuery version
            
            // jQuery code
            $("#startButton").click(function() {
                // 显示状态区域，隐藏结果和错误区域
                $("#statusArea").removeClass("d-none");
                $("#resultArea").addClass("d-none");
                $("#errorArea").addClass("d-none");
                
                // 禁用开始按钮
                $(this).prop("disabled", true).text("查重进行中...");
                
                // 发起AJAX请求
                $.ajax({
                    url: "/compare/full",
                    type: "POST",
                    success: function(response) {
                        // 隐藏状态区域，显示结果区域
                        $("#statusArea").addClass("d-none");
                        $("#resultArea").removeClass("d-none");
                        
                        // 更新结果详情
                        $("#resultSummary").text("所有课程教学总结的相似度计算已完成。");
                        $("#resultDetail").html("<p>查重结果: " + response + "</p>");
                        
                        // 重置按钮
                        $("#startButton").prop("disabled", false).text("重新查重");
                    },
                    error: function(xhr, status, error) {
                        // 隐藏状态区域，显示错误区域
                        $("#statusArea").addClass("d-none");
                        $("#errorArea").removeClass("d-none");
                        
                        // 更新错误信息
                        $("#errorMessage").text("查重过程中发生错误: " + (xhr.responseText || error));
                        
                        // 重置按钮
                        $("#startButton").prop("disabled", false).text("重试");
                    }
                });
                
                // 模拟进度更新（实际上后端没有实时进度反馈，这是一个视觉效果）
                // 移除simulateProgress函数及其调用
                $("#startButton").click(function() {
                    // ... 原有点击事件代码保持不变...
                    
                    // 注释掉进度模拟调用
                    // simulateProgress();
                });
                
                // 删除整个simulateProgress函数定义
            });
        });
    </script>
</body>
</html>
